<template>
<van-popup class="gold-wrap" position="right" :overlay="false" v-model="showMyYkbPanel">
  <van-nav-bar title="钱包" left-arrow @click-right="openPaySetting" @click-left="closeMyYkbPanel" left-text="返回">
    <van-icon name="setting" slot="right" />
  </van-nav-bar>
  <div class="gold-wrap-hd" @click="openPanelYkbPanel">
    <span class="icon"><van-icon name="gold-coin"/></span>
    <span class="name">益康币</span>
    <span class="cash">￥5000.00</span>
  </div>
  <div class="gold-wrap-bd">
    <div class="m1">
      <van-nav-bar left-text="益康币服务" @click-right="openYkbService">
        <van-icon name="question" slot="right" />
        </van-nav-bar>
        <van-row>
          <div @click="openShopPanel">
            <van-col span="8" class="col">
              <van-icon name="shop" class="icon" style="color:#ed7346" />
              <span>益康币商城</span>
            </van-col>
          </div>
          <div @click="openWelfareProductList">
            <van-col span="8" class="col">
              <van-icon name="receive-gift" class="icon" style="color:#999127" />
              <span>换购</span>
            </van-col>
          </div>
          <div @click="openPlayTaskPanel">
            <van-col span="8" class="col">
              <van-icon name="description" class="icon" style="color:#74d24e" />
              <span>玩任务</span>
            </van-col>
          </div>
          <div @click="openLargessPanel">
            <van-col span="8" class="col">
              <van-icon name="balance-details" class="icon" style="color:#b31c48" />
              <span>转赠</span>
            </van-col>
          </div>
          <div @click="recharge">
            <van-col span="8" class="col">
              <van-icon name="phone" class="icon" style="color:#5a50cb" />
              <span>手机充值</span>
            </van-col>
          </div>
          <!-- <van-col span="8" class="col">
         <van-icon name="debit-pay" class="icon" style="color:#2b5d59"/>
         <span>零钱管家</span>
       </van-col> -->
          <div @click="memberExclusive">
            <van-col span="8" class="col">
              <van-icon name="send-gift" class="icon" style="color:#4360c6" />
              <span>会员专属</span>
            </van-col>
          </div>
          <div @click="recommend">
            <van-col span="8" class="col">
              <van-icon name="qr" class="icon" style="color:#2eac82" />
              <span>推荐有赏</span>
            </van-col>
          </div>
          <div @click="more">
            <van-col span="8" class="col">
              <van-icon name="more" class="icon" style="color:#155bad" />
              <span>更多服务</span>
            </van-col>
          </div>
        </van-row>
    </div>
    <div class="m2">
      <van-nav-bar title="" left-text="增值服务" @click-right="openMoreIncrementService" right-text="更多">
        <!-- <van-icon name="question" slot="right" /> -->
      </van-nav-bar>
      <van-cell-group class="content">
        <van-cell title="+3币" value="开放买入当天可结算,期间可以取出" label="历史每日收益" />
        <van-cell title="+5币" value="开放买入当月可结算,期间不可以取出" label="历史每月收益" />
        <van-cell title="+7币" value="开放买入当年可结算,期间不可以取出" label="历史每年收益" />
        <!-- <van-cell title="+11币" value="开放买入当年可结算,期间不可以取出" label="历史年收益" /> -->
      </van-cell-group>
    </div>
  </div>
  <!-- 支付中心  -->
  <pay-setting-panel :paySetting="paySetting" @closePanel="closePanel"></pay-setting-panel>
  <!-- 益康币面板 -->
  <ykb-panel :showYkbPanel="showYkbPanel" @closeYbkPanel="closeYbkPanel"></ykb-panel>
  <!--益康币商城  -->
  <ykb-shop-panel :showShopPanel="showShopPanel" @closeShopPanel="closeShopPanel"></ykb-shop-panel>
  <!-- 益康币服务说明 -->
  <ykb-service-panel :showYkbSerice="showYkbSerice" @closeYkbService="closeYkbService"></ykb-service-panel>
  <!-- 更多增值服务面板 -->
  <more-increment-service :showMoreIncrementService="showMoreIncrementService" @closeMoreIncementService="closeMoreIncementService"></more-increment-service>
  <!-- 换福利面板 -->
  <welfare-product-list :showWelfareProductList="showWelfareProductList" @closeWelfareProductList="closeWelfareProductList"></welfare-product-list>
  <!-- 任务中心面板 -->
  <play-task-panel :showPlayTaskPanel="showPlayTaskPanel" @closePlayTaskPanel="closePlayTaskPanel"></play-task-panel>
  <!-- 转赠面板 -->
  <largess-panel :showLargessPanel="showLargessPanel" @closeLargessPanel="closeLargessPanel"></largess-panel>
</van-popup>
</template>
<script>
export default {
  props: ['showMyYkbPanel'],
  data() {
    return {
      paySetting: false, // 是否显示支付中心面板
      showShopPanel: false, // 是否显示益康币商城面板
      showYkbSerice: false, // 是否显示益康币服务说明面板
      showIncrementService: false, // 是否显示增值服务面板
      showMoreIncrementService: false, // 是否显示更多增值服务
      showWelfareProductList: false, // 是否显示换福利面板
      showPlayTaskPanel: false, // 是否显示玩任务面板
      showLargessPanel: false, // 是否显示转赠面板
      showYkbPanel: false // 是否显示益康币面板
    }
  },
  methods: {
    // 打开支付中心
    openPaySetting() {
      this.paySetting = true
      // this.$router.push('/paySetting')
    },
    // 关闭我的益康币面板
    closeMyYkbPanel() {
      this.$emit('closeMyYkbPanel');
    },
    // 关闭支付中心面板
    closePanel() {
      this.paySetting = false;
    },
    // 打开益康币商城
    openShopPanel() {
      this.showShopPanel = true
    },
    // 关闭益康币商城
    closeShopPanel() {
      this.showShopPanel = false
    },
    // 打开益康币说明面板
    openYkbService() {
      this.showYkbSerice = true
    },
    // 关闭益康币说明面板
    closeYkbService() {
      this.showYkbSerice = false
    },
    // 打开更多增值服务面板
    openMoreIncrementService () {
      this.showMoreIncrementService = true
    },
    // 关闭更多增值服务面板
    closeMoreIncementService () {
      this.showMoreIncrementService = false
    },
    // 打开换购福利面板
    openWelfareProductList() {
      this.showWelfareProductList = true;
    },
    // 关闭换购福利面板
    closeWelfareProductList() {
      this.showWelfareProductList = false;
    },
    // 打开玩任务面板
    openPlayTaskPanel() {
      this.showPlayTaskPanel = true
    },
    // 关闭玩任务面
    closePlayTaskPanel() {
      this.showPlayTaskPanel = false
    },
    // 打开转赠面板
    openLargessPanel() {
      this.showLargessPanel = true;
    },
    // 关闭转赠面板
    closeLargessPanel () {
      this.showLargessPanel = false;
    },
    // 关闭益康币面板
    closeYbkPanel () {
      this.showYkbPanel = false;
    },
    openPanelYkbPanel() {
      this.showYkbPanel = true;
    },
    // 手机充值
    recharge() {
      this.$dialog.alert({
        title: '话费充值',
        message: '该功能待完善中....'
      }).then(() => {
        // on close
      });
    },
    // 会员专属
    memberExclusive() {
      this.$dialog.alert({
        title: '会员专属',
        message: '该功能待完善中....'
      }).then(() => {
        // on close
      });
    },
    // 推荐有赏
    recommend() {
      this.$dialog.alert({
        title: '推荐有赏',
        message: '该功能待完善中....'
      }).then(() => {
        // on close
      });
    },
    more() {
      this.$dialog.alert({
        title: '更多功能',
        message: '更多功能还在完善中，请敬请期待!'
      }).then(() => {
        // on close
      });    }
  }
}
</script>
<style lang="scss">
@import '../../assets/styles/common.scss';
.gold-wrap {
    width: 100%;
    height: 101%;
    overflow-y: scroll;
    background-color: #f2f2f2;
    &-hd {
        height: px2rem(200px);
        width: 100%;
        background-color: #4f4f4f;
        display: flex;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        align-content: center;
        color: #fff;
        @include font-dpr(16px);
        line-height: px2rem(45px);
        .icon {
            @include font-dpr(26px);
            color: #e4ca5a;
        }
        .name {
            @include font-dpr(14px);
        }
        .cash {
            color: #c3c3c3;
        }
    }
    &-bd {
        .m1,
        .m2 {
            background-color: #fff;
            // padding-bottom: px2rem(10px);
        }
        margin-top: px2rem(12px);
        width: 100%;
        .col {
            padding: px2rem(20px) 0;
            border: 1px solid #f2f2f2;
            display: flex;
            flex-direction: column;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            align-content: center;
            // background-color: #2492e7
        }
        .icon {
            @include font-dpr(26px);
            margin-bottom: px2rem(10px);
        }
        .m2 {
            margin-top: px2rem(10px);
            .content {
                margin-top: 0;
            }
            .van-cell__text {
                color: #999127;
            }
        }
    }
}
</style>
